<template>
  <view>
    <view v-for="(item, index) in list" class="password">
      <view class="u-flex u-col-center">
        <image class="icon" src="/static/icon/pass-1.png"></image>
        <view class="name">{{item.house_title}}</view>
      </view>
      <view class="u-flex u-col-center u-row-center u-m-t-10">
        <view class="icon-box" @click="password_type = !password_type">
          <image class="icon1" src="/static/icon/pass-2.png"></image>
        </view>
        
        <view class="con u-flex u-col-center u-row-center">
          <template v-if="!password_type">{{item.lock_password}}</template>
          <template v-else>*****</template>
        </view>
        <view class="icon-box" @click="doorShow(index, item)">
          <image class="icon1" src="/static/icon/pass-3.png"></image>
        </view>
        
      </view>
    </view>
    <!-- 密码 -->
    <zb-door ref="doorRef" @ok="getPassword" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list:[],
        page:1,
        total:0,
        http:'',
        doorIdx:-1
      }
    },
    onLoad() {
      uni.showLoading()
      this.getList()
    },
    onShow() {
      uni.showLoading()
      this.http = this.$api.httpUrlApi();
    },
    methods:{
      // 密码解锁成功
      getPassword(e){
        console.log('getPassword---', e)
        this.list[this.doorIdx].lock_password = e;
      },
      doorShow(index, item){
        this.doorIdx = index
        this.$refs.doorRef.showFun(item)
      },
      // 获取列表
      getList(){
        this.$api.tenancyOrderListApi({page:this.page, payment_status:2}).then(res=>{
          uni.hideLoading()
          if(res.code === 1){
            this.list = this.list.concat(res.data.data);
            this.total = res.data.total;
            if(this.list.length < res.data.total){
              this.page++
            }
          }
        })
      },
    },
    onReachBottom() {
      if(this.page > 1 && this.list.length < this.total){
        this.getList()
      }
    }
  };
</script>

<style lang="scss" scoped>
  page {
    background-color: #f4f6f8;
    overflow: hidden;
  }
  .password{
    height: 180rpx;margin: 30rpx auto;
    width: 690rpx;
    background: #FFFFFF;
    border-radius: 16rpx; padding: 26rpx;
    .icon-box{width: 80rpx; height: 80rpx; display: flex; align-items: center; justify-content: center;}
    .icon{width: 46rpx; height: 46rpx;}
    .name{font-size: 30rpx; color: #282828;}
    .icon1{width: 28rpx; height: 28rpx;}
    .con{
      width: 186rpx;
      height: 60rpx;
      border-radius: 32rpx; font-size: 28rpx;
      border: 1px solid rgba(151,151,151,0.43);
    }
  }
  
  
</style>